<template>
  <div>
    <div class="itemOrder">
      <div class="up">
        <p class="price">{{goodsArea.name}}</p>
      </div>
      <div class="content" v-for="(item, index) in goodsArea.products" :key="index" @click="onItemCLick">
        <img class="mainImg" :src=item.pic>
        <div class="con-right">
          <div class="con-text">
            <h1>{{item.name}}</h1>
            <p>{{item.norm}}x{{item.num}}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  import Moment from 'moment';

  export default {
    name: 'itemOrderDetail',
    data() {
      return {
        item: this.itemObj, // 订单信息
        trade: this.tradeStatus // 交易状态
      };
    },
    props: {
      goodsArea: {
        type: Object
      }
    },
    created() {
      console.log(1111, this.goodsArea);
    },
    methods: {
      onItemCLick() {
        this.$emit('onItemCLick', this.index);
      },
      dateFormat(val) {
        return Moment(val).format('YYYY-MM-DD HH:mm:ss');
      }
    },
    watch: {}
  };
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
  @import "../../assets/stylus/main.styl";
  .itemOrder {
    width: 96vw
    margin 10px auto
    padding: 2vw 2vw 4vw;
    box-sizing border-box
    background white
    border-radius(5px)
    .up {
      width: 100%
      padding: 3vw 0 1vw;
      bor-b();
      flex-x();
      .time {
        word-vw(14, first-ash)
      }
      .price {
        word-vw(14, main-color)
      }
    }
    .content {
      padding: 10px 0 0;
      flex-x(flex-start)
      position relative
      .mainImg {
        width: vw(80)
        height: vw(80)
        margin-right 3vw
        border-radius(3px)
      }
      .con-right {
        flex-x(flex-start)
        flex: 1
        .con-text {
          h1 {
            word-vw(14, first-ash)
            line-height 1.5
            multi(2)
          }
          p {
            margin-top 10px
            word-vw(12, third-ash)
          }
        }
        .con-text1 {
          flex: 1;
          flex-x()
          P {
            flex: 1;
            text-align: center;
            word-vw(15, third-ash)
          }
        }
      }
    }
    .text-bt {
      position absolute
      bottom: 10px
      right: 10px
      button {
        background none
        border(main-color);
        word-vw(14, main-color)
        border-radius(20px)
        padding: 3px 6px;
      }
    }
  }

  .icon {
    width: 3vw
    height: 3vw
    fill: third-ash
  }
</style>
